<script setup>
// 导入vue中组件
import { ref, reactive, onBeforeMount, defineProps, defineEmits, toRaw } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 引入其他组件传入的数据
const props = defineProps({
	background: {
		type: String,
		default: 'rgba(255, 255, 255, 1)'
	},
	color: {
		type: String,
		default: 'rgba(0, 0, 0, 1)'
	},
	fontSize: {
		type: String,
		default: '32'
	},
	iconWidth: {
		type: String,
		default: '116'
	},
	iconHeight: {
		type: String,
		default: '38'
	},
	titleText: {
		type: String,
		default: ''
	},
	isHome: {
		type: Boolean,
		default: false
	}
});
// 根据当前navBar的高度，动态计算不同手机时的navvar导航栏的高度
const emits = defineEmits(['attachHeight']);
onBeforeMount(() => {
	// 调用状态栏高度函数
	setStatusHeight();
	setStyle();
	// 传递方式1
	// uni.$emit('sendHeight', toRaw(nvbHeight.value));
	// 传递方式2，传递navBar的高度给父组件
	emits('attachHeight', {
		detail: {
			statusHeight: statusHeight.value,
			navHeight: navHeight.value,
			navBarHeight: statusHeight.value + navHeight.value
		}
	});
});
// 状态来的高度
const statusHeight = ref(0);
// 内容导航栏的高度
const navHeight = ref(0);
// 内容和状态栏的总高度
const nvbHeight = ref(0);
// 背景颜色
const navStyle = ref('');
// 字体样式
const fontStyle = ref('');
// 图标样式
const iconStyle = ref('');
// 获取当前页面的数量
const pages = ref(getCurrentPages().length);
// 获取小程序按钮胶囊的位置
const menu = reactive(uni.getMenuButtonBoundingClientRect());

// 计算状态栏的高度
const setStatusHeight = () => {
	const { statusBarHeight, system } = uni.getSystemInfoSync();
	// console.log(res);
	statusHeight.value = statusBarHeight * 2;
	const isiOS = system.indexOf('iOS') > -1;
	// console.log(isiOS);
	// 判断是哪种手机来设置内容导航栏的高度
	if (!isiOS) {
		// 如果是安卓手机
		navHeight.value = 96;
	} else {
		navHeight.value = 88;
		// console.log(this.$parent);
	}
	nvbHeight.value = statusHeight.value + navHeight.value;
};
// 设置nav样式
const setStyle = () => {
	navStyle.value = ['background:' + props.background].join(';');
	fontStyle.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(';');
	iconStyle.value = ['width:' + props.iconWidth + 'rpx', 'height:' + props.iconHeight + 'rpx'].join(';');
};
// 返回主页函数
const backHome = () => {
	if (pages.value > 1) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/index/index'
		});
	}
};
</script>
<template>
	<view class="nav">
		<view class="nav-status" :style="'height:' + statusHeight + 'rpx;' + navStyle"></view>
		<!-- 判断是否为首页 -->
		<view class="head-nav" v-if="isHome" :style="'height:' + navHeight + 'rpx;line-height:' + navHeight + 'rpx;padding-left:20rpx;'">
			<text class="city">中部地区</text>
			<!-- 首页搜索框 -->
			<view class="nav-search" style="flex: 1">
				<navigator
					url="../../pages/search/index"
					:style="
						'height:' +
						menu.height * 2 +
						'rpx;line-height:' +
						menu.height * 2 +
						'rpx;margin-top:' +
						(menu.top * 2 - statusHeight) +
						'rpx;margin-left: 32rpx;margin-right:' +
						(menu.width * 2 + 24) +
						'rpx;background: #f4f4f4;border-radius: 200rpx;text-align:center'
					"
				>
					<text class="search-text">找医院</text>
				</navigator>
			</view>
		</view>
		<!-- 如果不是首页，显示导航栏和返回按钮 -->
		<view v-else class="nav-bar" :style="'height:' + navHeight + 'rpx;' + navStyle">
			<view class="back-icon" @click="backHome">
				<image v-if="pages > 1" src="../../static/resource/navbar/ic_back.png" mode=""></image>
				<image v-else src="../../static/resource/navbar/ic_home.png" mode=""></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view class="titleText" :style="'height:' + navHeight + 'rpx;line-height:' + navHeight + 'rpx;' + fontStyle">{{ titleText }}</view>
			</view>
		</view>
	</view>
</template>

<style>
.nav {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9;
	clear: both;
	overflow: hidden;
}
.back-icon {
	display: flex;
	align-items: center;
	width: 68rpx;
	height: 100%;
	margin-left: 20rpx;
}
.back-icon image {
	height: 68rpx;
	width: 68rpx;
}
.nav-bar {
	position: relative;
	clear: both;
	overflow: hidden;
}
.nav-bar .nav-title {
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translateX(-50%);
}
.head-nav {
	display: flex;
}
.city {
	display: inline-block;
	position: relative;
	font-size: 30rpx;
	font-weight: bold;
	padding-left: 55rpx;
	background: url()
		no-repeat left center;
	background-size: 40rpx;
}

.city:after {
	content: ' ';
	display: inline-block;
	height: 6px;
	width: 6px;
	border-width: 1px 1px 0 0;
	border-color: #353535;
	border-style: solid;
	-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	position: relative;
	top: -2px;
	position: absolute;
	top: 50%;
	margin-top: -4px;
	right: -10px;
}
.search-text {
	display: inline-block;
	padding-left: 30rpx;
	color: #bbbbbb;
	font-size: 26rpx;
	background: url()
		no-repeat left center;
	background-size: 23rpx;
}
</style>
